<template>
  <div class="invoiceDialog">
    <div class="export-box">
      <el-button type="primary" @click="exportHandler" :disabled="!tableData.length || disabled">导出</el-button>
    </div>
    <el-table v-loading="tableLoading" ref="multipleTable" :data="tableData" height="660" tooltip-effect="dark"
      style="width: 100%" :stripe="true">
      <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
      <el-table-column prop="batch_number" :show-overflow-tooltip="true" label="批次号" align="center" width="170">
        <template slot-scope="scope" v-if="scope">{{ batch_number }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="运单号" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.add_id + "-" + scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column prop="add_time" :show-overflow-tooltip="true" label="接单时间" align="center"></el-table-column>
      <el-table-column prop="time" :show-overflow-tooltip="true" label="审核时间" align="center"></el-table-column>
      <el-table-column prop="sjxm" label="司机姓名" align="center" width="100"></el-table-column>
      <el-table-column prop="cph" label="车牌号" align="center" width="100"></el-table-column>
      <el-table-column prop="goods" label="货物名称" align="center" width="100"
        :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="shkg" label="收货重量" align="center" width="100"></el-table-column>
      <el-table-column prop="unit_price" label="运费单价(元)" align="center" width="100"></el-table-column>
      <el-table-column prop="bill_total_price" label="总价(元)" align="center" width="110"></el-table-column>
      <el-table-column prop="money_bill" label="含税金额(元)" align="center" width="110"></el-table-column>
      <el-table-column prop="ship_address" :show-overflow-tooltip="true" label="发货地" align="center"></el-table-column>
      <el-table-column prop="to_address" :show-overflow-tooltip="true" label="收货地" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getToken,
  getUserId
} from "@/utils/auth";
import { invoiceSubDetails } from "@/api/childCompany/moneyManagment.js";
export default {
  name: "invoiceDetailDialog",
  props: {
    batch_number: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      disabled: false,//导出按钮的禁用
    };
  },
  mounted() {
    // console.log("batch_number", this.batch_number);
    this.initial();
  },
  methods: {
    async initial() {
      // return;
      this.tableLoading = true;
      let result = await invoiceSubDetails({
        batch_number: this.batch_number
      });
      this.tableLoading = false;

      if (result.code == 200) {
        this.tableData = result.data.invoiceList || [];
        // this.tableData = new Array(40).fill({});
      }
    },
    exportHandler() {
      //导出
      this.disabled = true;
      const link = document.createElement('a');
      link.href = `https://api.zhgylgl.com/api/admin/invoiceSubDetailsExport?batch_number=${this.batch_number}&token=${getToken()}&userId=${getUserId()}`;
      link.click();
      setTimeout(() => {
        this.disabled = false;
      }, 2000)
    }
  }
};
</script>

<style lang="scss" scope>
.invoiceDialog {
  .btn {
    width: 150px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
  }

  .export-box {
    display: flex;
    justify-content: flex-end;
  }

  .main {
    width: 70%;
    margin: 0 auto;
    font-size: 16px;
    // background: pink;
    display: flex;
    flex-direction: column;

    .item {
      display: flex;
      margin-bottom: 20px;

      .title {
        width: 120px;
        text-align: right;
      }

      .content {
        margin-left: 10px;
      }
    }
  }
}
</style>
